
<template>
  <div v-if="isRedoal">
    <div class="backjing">
      <div class="backfirtimg"><img src="../assets/jifen.png" alt="" /></div>
      <div class="flex_c_m" style="color: #fff">
        <span style="font-size: 20px; color: #e9671f; margin: 0 10px">{{
          onesPoints
        }}</span
        >积分抽取一次
      </div>
      <LuckyGrid
        ref="LuckDraw"
        width="300px"
        height="300px"
        :prizes="prizes"
        :buttons="buttons"
        :blocks="blocks"
        :default-config="defaultConfig"
        :default-style="defaultStyle"
        :active-style="activeStyle"
        @start="startCallBack"
        @end="endCallBack"
      />

      <div class="parentstyle">
        <div class="colpar"><img src="../assets/lane.png" alt="" /></div>
        <div class="pcolo">活动奖品</div>
        <div class="colpar"><img src="../assets/lane.png" alt="" /></div>
      </div>
      <div class="listparent">
        <div
          :class="index % 2 ? 'collisttwo' : 'collist'"
          v-for="(item, index) in prizeList"
          :key="index"
        >
          <div class="colfirst">
            <div class="imgfirst"><img :src="item.image" alt="" /></div>
            <div class="secoundtitle">
              <div class="secPPP">{{ item.prize }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div :class="index % 2 ? 'lasttitletwo' : 'lasttitle'">
            剩余{{ item.quantity || 0 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import { Debounce } from "@/utils/public";
import wx from "weixin-js-sdk";
import { MessageBox, Toast } from "mint-ui";
import banShare from "@/utils/banShare";
import { server } from "@/utils/env";
import sharePage from "@/utils/sharePage";
export default {
  data() {
    return {
      luckyNum: 0,
      prizes: [],
      blocks: [
        { padding: "15px", background: "#ffc27a", borderRadius: 28 },
        { padding: "4px", background: "##E9671F", borderRadius: 23 },
        { padding: "4px", background: "#E9671F", borderRadius: 20 },
      ],
      defaultConfig: {
        gutter: 5,
      },
      defaultStyle: {
        borderRadius: 15,
        fontColor: "#DF424B",
        fontSize: "14px",
        textAlign: "center",
        background: "#FAEFEE",
        shadow: "0 5 1 #ebf1f4",
      },
      activeStyle: {
        background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
        shadow: "",
      },
      nineList: [
        { name: "1", prize: "zz", quantity: 2, image: "../assets/img20" },
      ],
      chuanLL: "",
      userstring: "",
      numString: "",
      numName: "",
      nineList: [],
      messageTall: "",
      prizesID: "",
      LuckyWheelList: [],
      publicButton: 0,
      videoId: 0,
      nowPoints: 0,
      isFirst: window.sessionStorage.getItem("first"),
      onesPoints: 0,
      prizeList: [],
      isRedoal: false,
      row: {},
    };
  },

  computed: {
    buttons() {
      return [
        {
          x: 1,
          y: 1,
          background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
          shadow: "0 5 1 #e89b4f",
          imgs: [
            {
              src: require(`../assets/lijichoujiang.png`),
              width: "90%",
              height: "90%",
              top: "5%",
            },
          ],
        },
      ];
    },
  },
  created() {
    let userId = window.localStorage.getItem("userId");
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      this.isRedoal = true;
    }
    this.form = this.$route.query.form;
    if (this.$route.query.row == undefined) {
      console.log("默认页面");
    } else {
      this.videoId = JSON.parse(this.$route.query.row);
    }
  },
  async mounted() {
    // this.registerDay();
    this.getPrizeList();
    if (this.form == "ans") {
      const pathUrl = location.href.split("#")[0];
      request({
        url: "generator/user/front/sign",
        method: "post",
        data: {
          url: pathUrl,
        },
      }).then((res) => {
        banShare(res);
      });
      await this.hintTrue();
    } else {
      sharePage({ row: this.videoId });
      await this.hint();
    }
  },
  methods: {
    hint() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        this.nowPoints = response.user.nowPoints;
      });
    },
    hintTrue() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/usedamount/front/info?drawId=" + this.videoId,
        method: "get",
      }).then((response) => {
        this.nowPoints = response.usedamount.amount || 0;
      });
    },
    registerDay() {
      request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log(response.status);
        if (response.status == 0) {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
        }
      });
    },
    getPrizeList() {
      let query = { id: this.videoId, type: 1 };
      // 模拟接口请求奖品列表
      request({
        url: "/generator/draw/front/listDrawPrizes",
        method: "get",
        params: query,
      }).then((response) => {
        if (response.msg == "该抽奖活动已过期!") {
          Toast(response.msg);
          this.$router.go(-1);
          return;
        }
        console.log(response.draw.prizes);
        this.nineList = response.draw.prizes;
        this.prizeList = [];
        response.draw.prizes.forEach((item) => {
          if (item.quantity * 1 > 999) {
            item.quantity = "999+";
          }
          if (item.prize != "谢谢参与") {
            this.prizeList.push(item);
          }
        });
        this.numString = response.draw.id;
        this.onesPoints = response.draw.points;
        this.luckyNum = response.draw.points;
        let data = response.draw.prizes;

        setTimeout(() => {
          const prizes = [];
          let axis = [
            [0, 0],
            [1, 0],
            [2, 0],
            [2, 1],
            [2, 2],
            [1, 2],
            [0, 2],
            [0, 1],
          ];
          for (let i = 0; i < 8; i++) {
            let item = data[i];
            console.log(item.id);
            prizes.push({
              id: item.id,
              index: i,
              x: axis[i][0],
              y: axis[i][1],
              fonts: [{ text: item.prize, top: "70%" }],
              imgs: [
                { src: item.image, width: "50%", height: "50%", top: "15%" },
              ],
            });
          }
          this.prizes = prizes;
          console.log(this.prizes);
        }, 0);
      });
    },
    startCallBack: Debounce(async function () {
      console.log("开始");
      // console.log((Math.random() * 7) >> 0);
      if (this.isFirst == 0 && this.nowPoints < this.onesPoints) {
        console.log("此用户没用关注");
        this.$router.replace({ name: "jumpGZH" });
      } else if (this.nowPoints < this.onesPoints) {
        Toast("积分不足！");
      } else {
        await this.getGoodS();
        // setTimeout(() => {
        if (this.messageTall == "success") {
          console.log(this.prizesID);
          for (let i = 0; i < this.prizes.length; i++) {
            // console.log(i, this.prizes[i].id);
            if (this.prizes[i].id === this.prizesID) {
              this.$refs.LuckDraw.play();
              setTimeout(() => {
                this.$refs.LuckDraw.stop(i);
              }, 3000);
            }
          }
        } else {
          Toast(this.messageTall);
        }
        // }, 1000);
      }
    }, 2000),
    getGoodS() {
      let query = { id: this.numString };
      return request({
        url: "/generator/draw/front/draw",
        method: "get",
        params: query,
      }).then((response) => {
        this.messageTall = response.msg;
        this.prizesID = response.prizes.id;
        if (response.userprizes) {
          this.row = {
            id: response.userprizes.id,
            title: response.userprizes.prize,
            image: response.userprizes.image,
            prizesType: response.prizes.type,
          };
        }
        // this.dialogVisible = true;
      });
    },
    endCallBack(prize) {
      console.log(prize);
      console.log(prize.fonts[0].text);
      this.nowPoints -= this.onesPoints;
      // let row = JSON.stringify(this.row);
      let row = this.row;
      console.log(row, "row");
      console.log("恭喜你获得", prize);
      if (prize.fonts[0].text == "谢谢参与") {
        Toast("哦吼,谢谢参与,下次一定中！");
      } else if (row.prizesType == 0 || row.prizesType == 1) {
        Toast(`恭喜你获得${prize.fonts[0].text}`);
        this.$router.push({ name: "inpackeg", query: { row: row } });
      } else {
        Toast(`恭喜你获得${prize.fonts[0].text}`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.header_but {
  background-color: #c44a30;
  padding: 20px;
  // height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lun_name p {
  // border: 1px solid red;
  color: #ffff;
  font-weight: bold;
  font-size: 20px;
}
.boxTitle {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #c44a30;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.backjing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 0 0;
  background-image: url("../assets/background.png");
  background-size: 100% 100%;
}
.backfirtimg {
  // border: 1px solid red;
  width: 220px;
  margin-bottom: 50px;
}
.backfirtimg img {
  width: 100%;
}
.parentstyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
}
.colpar {
  // border: 1px solid red;
  img {
    width: 100%;
  }
}
.pcolo {
  color: #ec681e;
  font-size: 18px;
  font-weight: bold;
  width: 150px;
  text-align: center;
  padding: 0 5px;
}
.listparent {
  // border: 1px solid red;
  width: 100%;
  padding: 0 20px 20px 20px;
}
.collist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: #ec681e;
  background-image: url("../assets/oringe.png");
  background-size: 100% 100%;
  padding: 10px;
}
.collisttwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: #f9b578;
  background-image: url("../assets/yellow.png");
  background-size: 100% 100%;
  padding: 10px;
}
.colfirst {
  display: flex;
  align-items: center;
}
.imgfirst {
  // border: 1px solid red;
  width: 60px;
  height: 60px;
  img {
    width: 100%;
    height: 100%;
  }
}
.secoundtitle {
  padding: 0 20px;
  color: white;
}
.secPPP {
  font-size: 20px;
  font-weight: bold;
}
.lasttitle {
  color: #ec681e;
  margin-right: 10px;
  // border: 1px solid red;
  border-radius: 50px;
  background: #f9b578;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
}
.lasttitletwo {
  color: #f9b578;
  margin-right: 10px;
  border-radius: 50px;
  background: #ec681e;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
}
</style>